/*
1.退出
    1.1给退出按钮点击绑定事件
    1.2弹出一个确认框询问用户 是否要退出
    1.3确认退出
        1.3-1 清空本地存储中的token！！！
        1.3.2 跳转到登录页面

2.左侧菜单
    2.1 一级标题 点击 
        1 获取到一级标题对应的a标签 数组
        2  遍历数组  按个给a标签绑定点击事件
        3 获取被点击的a标签的兄弟元素 ul
        4 给ul 切换 类 show
    2.2 二级标签 点击
        1 先获取 二级标题 a标签 数组 遍历绑定事件
        2 先找到之前添加了 active 高亮   dom元素 二级 a标签 
        3 移除它身上的class
        4 再给当前被点击的  a标签   添加 高亮类 active



*/
//获取元素
const logout = document.querySelector('.logout');
//获取一级标题 数组
const oneAList = document.querySelectorAll('.nav>li>a');
//获取二级标题 数组
const subAList = document.querySelectorAll('.nav ul a');

//退出点击事件
logout.addEventListener('click', e => {
    if (confirm('您确定要退出吗?')) {
        // 清空本地存储
        localStorage.removeItem('token117');
        setTimeout(() => {
            // 跳转到登录页面
            location.href = 'login.html';
        }, 1000);
    }
});

//遍历数组  按个给一级菜单绑定点击事件
oneAList.forEach(one =>
    one.addEventListener('click', e => {
        //获取到one的兄弟元素 - 二级菜单
        //给ul 切换 类 show
        one.nextElementSibling.classList.toggle('show');
    }))

//遍历数组  按个给二级菜单绑定点击事件
subAList.forEach(sub => {
    sub.addEventListener('click', e => {
        //获取 以前选中了的 a标签(高亮)
        const beforeA = document.querySelector('.nav ul a.active');
        //移出 active类
        beforeA.classList.remove('active');
        //再给当前 点击的a标签 添加 active类
        sub.classList.add('active');
    })
}
)


